<template>
        <li :class="list_active" :id="teb.id">
            <a :href="teb.url" :class="a_active" @click="teb_to_com(teb)" >{{teb.name}}</a>
            <i class="fa fa-times" aria-hidden="true" @click="close_teb(teb)"></i>
        </li>
</template>
<script>
export default {
    name:"Content_Teb",
    data(){
        return {
            li_style:["teb-li"],
            a_style:["teb-li-title"],
            
        }
    },
    props:["teb"],
    methods:{
        close_teb(obj){
            let activeobjold=this.$store.state.activeindex;//缓存旧的激活选项卡ID
            this.$store.dispatch("Delete_teb",obj);
            if(obj.id==activeobjold){//校验是否是关闭激活的选项卡，如果是导航到前一个激活的页面
                let activeobj=this.$store.state.content_Tab.find(item=>item.id==this.$store.state.activeindex);
                this.$router.push({name:activeobj.menuurl})
            }

         
        },
        teb_to_com(obj){
            if(this.$route.name!==obj.menuurl){//检测路由是否重复提交
                this.$router.push({name:obj.menuurl});
                this.$store.dispatch("UpdateActive",obj);
            }
        }
    },
    computed:{
        list_active(){
            return this.$store.state.activeindex==this.teb.id?["teb-li","teb-li-active"]:["teb-li"]
        },
        a_active(){
            return this.$store.state.activeindex==this.teb.id?["teb-li-title","teb-title-active"]:["teb-li-title"]
        }
    },
    mounted(){
       
    },
    beforeDestroy(){
        
    }
}
</script>
<style>
  .teb-li{
            float: left;
            margin: 3px 5px 2px 3px;
            border-radius: 3px;
            font-size: 12px;
            overflow: hidden;
            cursor: pointer;
            height: 23px;
            line-height: 23px;
            border: 1px solid #e9eaec;
            background: #fff;
            padding: 0 5px 0 12px;
            vertical-align: middle;
            color: #666;
            -webkit-transition: all .3s ease-in;
            transition: all .3s ease-in;
        }
        .teb-li-title{
            float: left;
            max-width: 80px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 5px;
            color: #666;
        }
        .teb-li-title:valid{
            color: #666;
        }
        .teb-li-title:link{
            color: #666;
        }
        .teb-li-active{
            border: 1px solid #409eff;
            background-color: #409eff;
            color: #fff;
        }
        .teb-title-active{
            color: #fff;
        }
</style>